<template>
    <div class="page-recharge">
        <Tabbar :leftArrow='true' :title="$t('textTrans.充值')" :hidden='false'></Tabbar>
        <ul data-v-a26616ee="" class="pay-wrap symbol-list">
            <li data-v-a26616ee="" class="symbol-item">
                <div data-v-a26616ee="" class="icon">
                    <img data-v-a26616ee="" src="../../assets/imgs/quotation/tether_trc20.png">
                </div>
                <div data-v-a26616ee="" class="tilte">trc20-USDT<div data-v-a26616ee="" class="rate">汇率 1:8.426019 TRX</div>
                </div>
                <div data-v-a26616ee="" class="btn" @click="selectRecharge('usdt')">选择</div>
            </li>
            <li data-v-a26616ee="" class="symbol-item">
                <div data-v-a26616ee="" class="icon">
                    <img data-v-a26616ee="" src="../../assets/imgs/quotation/tether_TRX.png">
                </div>
                <div data-v-a26616ee="" class="tilte">TRX<div data-v-a26616ee="" class="rate">汇率 1:1 TRX</div>
                </div>
                <div data-v-a26616ee="" class="btn" @click="selectRecharge('trx')">选择</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
        selectRecharge(item){
            let type = this.$route.query.type;
            if (item == 'trx'){
                this.$router.push('pdrawTrx?type='+type)
            } else {
                this.$router.push('pdrawUsdt?type='+type)
            }
        }
    }
}
</script>
<style scoped lang="less">
.page-recharge .form {
    position: relative;
    margin: 4vw;
    border: 1px solid rgba(25,223,179,0);
    border-radius: 1.33333vw;
    padding: 0!important;
}
.page-recharge .symbol-list {
    padding: 0 4vw;
}
.pay-wrap {
    overflow: hidden;
    margin-bottom: 4vw;
    border-radius: 2.13333vw;
}
.page-recharge .symbol-list .symbol-item {
    display: flex;
    align-items: center;
    height: 17.33333vw;
    border-bottom: 1px solid #999999;
}
.page-recharge .symbol-list .icon {
    margin-right: 2.66667vw;
    width: 8vw;
    height: 8vw;
    border-radius: 100%;
    overflow: hidden;
}
.page-recharge .symbol-list img {
    display: block;
    width: 100%;
    height: 100%;
}
.page-recharge .symbol-list .tilte {
    flex: 1;
    font-size: 3.73333vw;
    color: #fff;
}
.page-recharge .symbol-list .rate {
    font-size: 3.2vw;
    color: rgb(153, 153, 153);
}
.page-recharge .symbol-list .btn {
    padding: 2.66667vw 2.66667vw;
    border-radius: 0.8vw;
    background: var(--color-primary, #f59a23);
    color: #fff;
    font-size: 3.2vw;
}
.btn {
    position: relative;
    display: inline-block;
    text-align: center;
    border: none;
    outline: none;
    transition: opacity .2s;
}
</style>